<template>
  <div class="container">
    <h3 class="title">
      <svg-icon icon-class="nested" class="title-icon" />订单管理
    </h3>

    <el-card>
      <div slot="header">
        <span>订单详情</span>
      </div>
      <div>
        <span style="display: inline-block;margin-bottom:10px;">客户信息</span>
        <el-form :inline="true" :model="formInline" class="demo-form-inline">
          <el-form-item label="姓名:" style="margin-right:50px;margin-bottom: 15px;">
            <span>{{formInline.userName}}</span>
          </el-form-item>
          <el-form-item label="手机号码:" style="margin-right:50px;margin-bottom: 15px;">
            <span>{{formInline.userPhone}}</span>
          </el-form-item>
          <el-form-item label="身份证:" style="margin-right:50px;margin-bottom: 15px;">
            <span>{{formInline.userIdCard}}</span>
          </el-form-item>
        </el-form>
      </div>
      <div style="border-top:1px solid #e6ebf5;margin-bottom:10px;">
        <h3>付款信息</h3>
        <el-table :data="tableData" border stripe style="width: 100%;margin-bottom:10px;">
          <el-table-column label="合同号">
            <template slot-scope="scope">HT{{scope.row.id}}</template>
          </el-table-column>
          <el-table-column prop="orderNo" label="订单编号"></el-table-column>

          <el-table-column prop="projectName" label="项目名称"></el-table-column>
          <el-table-column label="房号">
            <template slot-scope="scope">{{scope.row.loudong}}栋{{scope.row.roomNo}}号</template>
          </el-table-column>

          <el-table-column label="款项类型" prop="moneyType"></el-table-column>
          <el-table-column prop="amountReceived" label="待收金额"></el-table-column>
          <el-table-column prop="actualAmountReceived" label="实收金额"></el-table-column>
          <el-table-column prop="payType" label="支付方式"></el-table-column>
          <el-table-column label="付款时间">
            <template slot-scope="scope">{{scope.row.transactionHour|getTime}}</template>
          </el-table-column>
        </el-table>
        <el-button type="primary" @click="getFlow">查看此房间付款流水</el-button>
        <el-table
          :data="list"
          border
          stripe
          v-if="showFlow"
          :summary-method="getSummaries"
          show-summary
          :span-method="objectSpanMethod"
          style="width: 100%;margin-bottom:10px;margin-top:20px"
        >
          <el-table-column prop="id" label="序号"></el-table-column>
          <el-table-column prop="orderNo" label="订单编号"></el-table-column>
          <el-table-column prop="userName" label="客户姓名"></el-table-column>
          <el-table-column prop="userPhone" label="手机号"></el-table-column>
          <el-table-column prop="userIdCard" label="身份证"></el-table-column>
          <el-table-column prop="projectName" label="项目"></el-table-column>
          <el-table-column label="房号">
            <template slot-scope="scope">{{scope.row.loudong}}栋{{scope.row.roomNo}}号</template>
          </el-table-column>
          <el-table-column prop="moneyType" label="款项类型"></el-table-column>
          <el-table-column prop="amountReceived" label="待收金额"></el-table-column>
          <el-table-column prop="actualAmountReceived" label="实收金额"></el-table-column>

          <el-table-column prop="payType" label="支付方式"></el-table-column>
          <el-table-column label="付款时间">
            <template slot-scope="scope">{{scope.row.transactionHour|getTime}}</template>
          </el-table-column>
        </el-table>
      </div>
    </el-card>
  </div>
</template>

<script>
import { getDetail, getDetailList } from "@/api/order";

export default {
  name: "detailManage",
  data() {
    return {
      formInline: {
        userPhone: "",
        userName: "",
        userIdCard: ""
      },
      tableData: [],
      id: "",
      list: [],
      showFlow: false,
      ActualAmountReceived: 0,
      AmountReceived: 0
    };
  },
  mounted() {
    this.id = this.$route.query.id;
    this.getD(this.id);
  },
  filters: {
    getTime(timestamp) {
      var time = new Date(timestamp);
      var y = time.getFullYear(); //getFullYear方法以四位数字返回年份
      var M = time.getMonth() + 1; // getMonth方法从 Date 对象返回月份 (0 ~ 11)，返回结果需要手动加一
      M = m < 10 ? "0" + M : M;
      var d = time.getDate(); // getDate方法从 Date 对象返回一个月中的某一天 (1 ~ 31)
      d = d < 10 ? "0" + d : d;
      var h = time.getHours(); // getHours方法返回 Date 对象的小时 (0 ~ 23)
      h = h < 10 ? "0" + h : h;
      var m = time.getMinutes(); // getMinutes方法返回 Date 对象的分钟 (0 ~ 59)
      m = m < 10 ? "0" + m : m;
      var s = time.getSeconds(); // getSeconds方法返回 Date 对象的秒数 (0 ~ 59)
      s = s < 10 ? "0" + s : s;
      return y + "-" + M + "-" + d + " " + h + ":" + m + ":" + s;
    }
  },
  methods: {
    getD(id) {
      getDetail(id).then(res => {
        this.formInline = res.data;
        this.tableData = [];
        this.tableData.push(res.data);
      });
    },

    getFlow() {
      this.showFlow = !this.showFlow;
      if (this.showFlow) {
        getDetailList(this.id).then(res => {
          this.list = res.data.list;
          this.ActualAmountReceived = res.data.ActualAmountReceived;
          this.AmountReceived = res.data.AmountReceived;
        });
      }
    },
    getSummaries(param) {
      const { columns, data } = param;
      const sums = [];
      columns.forEach((column, index) => {
        if (index === 0) {
          sums[index] = "应收总额";

          return;
        }
        if (
          index == 1 ||
          index == 2 ||
          index == 7 ||
          index == 6 ||
          index == 10
        ) {
          return;
        }
        if (index == 4) {
          return (sums[index] = this.AmountReceived);
        }
        if (index === 5) {
          return (sums[index] = "实收账款");
        }
        if (index == 8) {
          return (sums[index] = this.ActualAmountReceived);
        }
        if (index == 9) {
          return (sums[index] = "状态");
        }
        if (index == 11) {
          return (sums[index] =
            this.ActualAmountReceived == this.AmountReceived
              ? "已付清"
              : "未完成");
        }
      });

      return sums;
    },
    objectSpanMethod({ row, column, rowIndex, columnIndex }) {},
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
    }
  }
};
</script>

<style lang="scss" scoped>
.container {
  padding: 20px;
  background-color: rgb(240, 242, 245);
  position: relative;
  .title {
    font-size: 14px;
    font-weight: 400;
    .title-icon {
      font-size: 14px;
      display: inline-block;
      margin-right: 5px;
    }
  }
  /deep/ .el-card__header {
    padding: 18px 0;
    margin: 0 20px;
  }
}
.title-small {
  font-size: 14px;
}

.money {
  color: #409eff;
}
/deep/ .el-table__footer-wrapper tbody td {
  background: #fff;
  color: #000;
  font-size: 22px;
  white-space: nowrap;
  padding: 15px 0;
}
/deep/ .el-table__footer-wrapper td:nth-child(2),
/deep/ .el-table__footer-wrapper td:nth-child(3),
/deep/ .el-table__footer-wrapper td:nth-child(4),
/deep/ .el-table__footer-wrapper td:nth-child(7),
/deep/ .el-table__footer-wrapper td:nth-child(8),
/deep/ .el-table__footer-wrapper td:nth-child(11) {
  border-right: 0;
}
/deep/ .el-table__footer-wrapper td:nth-child(12) {
  color: #409eff;
}
</style>
